<template>
	<div class="page_container">
		<div class="page_container_scroll">
			<a-card :bordered="false" style="margin-bottom: 10px">
				<a-form ref="searchFormRef" name="advanced_search" class="ant-advanced-search-form" :model="searchFormState">
					<a-row :gutter="24">
						<a-col :span="6">
							<a-form-item name="code" label="费用分摊单号">
								<a-input v-model:value="searchFormState.code" placeholder="请输入费用分摊单号" />
							</a-form-item>
						</a-col>
						<a-col :span="6">
							<a-form-item name="shareMethod" label="分摊方式">
								<a-select
									placeholder="请选择分摊方式"
									v-model:value="searchFormState.shareMethod"
									:options="shareMethod"
								>
								</a-select>
							</a-form-item>
						</a-col>

						<a-col :span="6">
							<a-button type="primary" @click="tableRef.refresh(true)">
								<template #icon>
									<SearchOutlined />
								</template>
								查询
							</a-button>
							<a-button class="snowy-buttom-left" @click="reset">
								<template #icon><redo-outlined /></template>
								重置
							</a-button>
						</a-col>
					</a-row>
				</a-form>
			</a-card>
			<a-card :bordered="false">
				<s-table
					ref="tableRef"
					:columns="columns"
					:data="loadData"
					bordered
					:scroll="{ x: 700 }"
					:tool-config="toolConfig"
				>
					<template #operator class="table-operator">
						<div style="display: flex; justify-content: space-between">
							<a-select
								:default-value="globalOrg[0]"
								ref="select"
								:options="globalOrg"
								v-model:value="searchFormState.globalOrg"
								style="width: 120px"
							>
							</a-select>

							<a-button v-if="hasPerm('PRODUCE_COST_ADD')" type="primary" @click="formRef.onOpen()">
								<template #icon><plus-outlined /></template>
								新增
							</a-button>
						</div>
					</template>
					<template #bodyCell="{ index, column, record }">
						<template v-if="column.dataIndex === 'index'">
							<span>{{ index + 1 }}</span>
						</template>

						<template v-if="column.dataIndex === 'action'">
							<div v-if="hasPerm('PRODUCE_COST_APPROVED')" style="margin-right: 10px; display: inline-block">
								<a @click="infoRef.onOpen(record)">审核</a>
								<a-divider type="vertical" />
							</div>
							<div v-else style="margin-right: 10px; display: inline-block">
								<a @click="infoRef.onOpen(record)">查看</a>
								<a-divider type="vertical" />
							</div>
							<div v-if="record.createUser == userInfo.id" style="display: inline-block">
								<a-popconfirm
									v-if="record.approverStatus != bizTool.reviewPass"
									title="是否删除?"
									@confirm="remove(record)"
								>
									<a-button type="link" danger size="small">删除</a-button>
								</a-popconfirm>
								<a-divider
									v-if="record.approverStatus != bizTool.reviewPass"
									style="margin-left: 10px"
									type="vertical"
								/>
								<a v-if="record.approverStatus != bizTool.reviewPass" @click="formRef.onOpen(record)">编辑</a>
							</div>
						</template>
					</template>
				</s-table>
			</a-card>
			<Form ref="formRef" @successful="tableRef.refresh(true)" />
			<Info ref="infoRef" @successful="tableRef.refresh(true)" />
		</div>
	</div>
</template>

<script setup name="dbs">
	import costsharingApi from '@/api/produce/costsharingApi'
	import Form from './form.vue'
	import Info from './info.vue'
	import dayjs from 'dayjs'
	import tool from '@/utils/tool'
	import bizTool from '@/utils/bizTool'

	const searchFormState = ref({})
	const userInfo = tool.data.get('USER_INFO')
	const globalOrg = tool.dictList('global_org')
	const shareMethod = tool.dictList('shareMethod')

	const columns = [
		{
			title: '序号',
			dataIndex: 'index',
			ellipsis: true,
			width: 80,
			align: 'center'
		},
		{
			title: '审核状态',
			dataIndex: 'approverStatus',
			ellipsis: true,
			align: 'center',
			width: 80
		},
		{
			title: '费用分摊单号',
			dataIndex: 'code',
			ellipsis: true,
			align: 'center',
			width: 150
		},
		{
			title: '分摊方式',
			dataIndex: 'shareMethod',
			align: 'center',
			width: 150,
			ellipsis: true
		},

		{
			title: '人工费用',
			dataIndex: 'artificialTotal',
			align: 'center',
			width: 130,
			ellipsis: true
		},
		{
			title: '辅助材料费用',
			dataIndex: 'auxiliaryTotal',
			align: 'center',
			width: 130,
			ellipsis: true
		},
		{
			title: '制造费用',
			dataIndex: 'manufactureTotal',
			align: 'center',
			width: 130,
			ellipsis: true
		},
		{
			title: '折旧费用',
			dataIndex: 'depreciationTotal',
			align: 'center',
			width: 130,
			ellipsis: true
		},
		{
			title: '水电费用',
			dataIndex: 'hydropowerTotal',
			align: 'center',
			width: 130,
			ellipsis: true
		},

		{
			title: '其它费用',
			dataIndex: 'otherTotal',
			align: 'center',
			width: 130,
			ellipsis: true
		},
		{
			title: '操作人',
			dataIndex: 'createUserName',
			align: 'center',
			width: 130,
			ellipsis: true
		},
		{
			title: '操作日期',
			dataIndex: 'createTime',
			align: 'center',
			width: 130
		},
		{
			title: '审核人',
			dataIndex: 'approveUserName',
			align: 'center',
			width: 130,
			ellipsis: true
		},
		{
			title: '审核日期',
			dataIndex: 'approveTime',
			align: 'center',
			width: 130
		},
		{
			title: '操作',
			dataIndex: 'action',
			align: 'center',
			width: 200,
			fixed: 'right'
		}
	]

	const toolConfig = { refresh: true, height: true, columnSetting: false, striped: false }
	// 定义tableDOM
	const tableRef = ref(null)
	const formRef = ref()
	const infoRef = ref()
	const searchFormRef = ref()

	// 表格查询 返回 Promise 对象
	const loadData = (parameter) => {
		let searchParams = { ...searchFormState.value }
		if (searchParams.deliveryDate) {
			searchParams.deliveryDate = dayjs(searchParams.deliveryDate).format('YYYY-MM-DD')
		}
		return costsharingApi
			.getPage(Object.assign(parameter, searchParams))
			.then((data) => {
				data.records.forEach((element) => {
					element['createTime'] = bizTool.obtainCreateTime(element)
					element['createUserName'] = bizTool.obtainCreateUser(element)
					element['approveUserName'] = bizTool.obtainApprover(element)
					element['approveTime'] = bizTool.obtainApproverTime(element)
				})
				return data
			})
			.catch(() => {})
	}
	// 重置
	const reset = () => {
		searchFormRef.value.resetFields()
		tableRef.value.refresh(true)
	}
	// 删除
	const remove = (record) => {
		let params = [
			{
				id: record.id
			}
		]
		costsharingApi
			.delete(params)
			.then(() => {
				tableRef.value.refresh()
			})
			.catch(() => {})
	}
</script>

<style scoped>
	.primaryAdd {
		margin-right: 10px;
	}

	.snowy-buttom-left {
		margin-left: 8px;
	}
</style>
